<script setup>
import { ref } from 'vue'
const props = defineProps({
  tableData: {
    type: Array,
    default: []
  },
  columns: {
    type: Array,
    default: []
  },
  options:{
    type: Object,
    default: []
  }
})
const emits=defineEmits(['handleTable'])

function handleTable(e,type){
  
  emits('handleTable',e.row,type)
}
</script>

<template>
  <div class="table-wrapper">
    <el-table :data="props.tableData" style="width: 100%">
      <slot name="firstColumn"></slot>
      <el-table-column
        v-for="item in props.columns"
        :key="item.prop"
        :prop="item.prop"
        :label="item.label"
        width="180"
      />
      <!-- 表格相关操作 -->
      <el-table-column fixed="right" label="操作" width="200" v-if="props.options.length" class="table-options">
        <template #default="obj">
          <el-button v-for="item in props.options" type="primary"  @click="handleTable(obj,item.prop)">{{ item.label }}</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style lang="scss" scoped>
.table-wrapper {
  width: auto;
  overflow: hidden;
}
:deep(){
  .el-table {
    th,.table-options{
      background-color: #CCCCCC !important;
      width: 300px important;
    }
  }
}
</style>
